<template>
    <div class="container">
  
      <div class="login-wrapper">
        <div class="header">Register</div>
        <div class="form-wrapper">
          <h1>用户注册</h1>
          <div class="input-item">
            <p>输入账号：<input v-model="username" placeholder="用户名/邮箱/手机号"></p>
          </div>
          <div class="input-item">
            
            <p>输入密码：<input v-model="password" type="password" placeholder="密码"></p>
          </div>
          <div class="captcha-group">
            <input v-model="code" class="captcha-input" placeholder="验证码">
            <img :src="captcha" class="captcha-image" @click="refreshCaptcha">
          </div>
          
          <div class="botton1">
            <button @click="login" class="button1">注册</button>
            <router-link to="/" style="font-size:10px">已有账号？点此跳转</router-link>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <style scoped>
  
  html {
      height: 100%;
  }
  body {
      height: 100%;
  }
  .container {
      /* margin-top: 5%; */
      height: 980px;
      width: 100%;
      background: image(src);
     
      background-image: linear-gradient(to right, #424242, #c9c9c9);
      
  }
  .login-wrapper {
      background-color: #fff;
      width: 358px;
      height: 600px;
      border-radius: 15px;
      padding: 0 50px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  }
  .header {
      font-size: 38px;
      font-weight: bold;
      text-align: center;
      line-height: 150px;
  }
  .input-item {
      display: block;
      width: 100%;
      margin-bottom: 20px;
      border: 0;
      padding: 10px;
      border-bottom: 1px solid rgb(128, 125, 125);
      font-size: 15px;
      outline: none;
  }
  .input-item:placeholder {
      text-transform: uppercase;
      
  }
  .btn {
      text-align: center;
      padding: 10px;
      margin: 0 auto;
      width: 100%;
      margin-top: 40px;
      background-image: linear-gradient(to right, #ffffff, #ffffff);
      
  }
  .msg {
      text-align: center;
      line-height: 88px;
  }
  a {
      text-decoration-line: none;
      color: #abc1ee;
  }
  
  
  
  
  h1 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #333;
  }
  
  .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  input {
    padding: 10px;
    border: 1px solid #ccc; 
    border-radius: 4px;
    font-size: 14px;
  }
  
  .captcha-group {
    display: flex;
    margin-bottom: 10px;
    position:relative;
    margin-left: 93px;
  }
  
  .captcha-input { 
    align-self: flex-start; 
    margin-right: 10px;
  }
  
  .captcha-image {
    white-space: nowrap;
    margin-left: 10px;
    
  }
  
  /* button {
    width: 120px;
    padding: 10px;
    background-color: rgb(153, 198, 68);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  } */
  .button1 {
    width: 120px;
    padding: 10px;
    background-color: rgb(119, 152, 243);
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #0e0e0e;
    cursor: pointer;
    margin-top: 20px;
    margin-left: 35%;
  }
  
  button:hover {
    background-color: #a8a8a9; 
  }
  </style>
  <script>
  import { ref } from 'vue'
  import axios from 'axios'
  import { useRouter } from 'vue-router'
  
  export default {
    setup() {
      const router = useRouter()
      const username = ref('')
      const password = ref('')
      const code = ref('')
      const captcha = ref('')
      const realCode = ref('')
      const checked = ref(false)
  
      function getRandomCode() {
        let code = ''
        const codeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
  
        for (let i = 0; i < 4; i++) {
          code += codeChars.charAt(Math.floor(Math.random() * codeChars.length))
        }
  
        return code
      }
  
      function genCaptcha() {
        const code = getRandomCode()
        captcha.value = code
        realCode.value = code
  
        const canvas = document.createElement('canvas')
        canvas.width = 100
        canvas.height = 30
  
        const context = canvas.getContext('2d')
        context.font = 'bold 26px Arial'
        context.fillText(code, 15, 25)
  
        return canvas.toDataURL()
      }
  
      function refreshCaptcha() {
        captcha.value = genCaptcha()
      }
  
      function login() {
        if (code.value.toUpperCase() === realCode.value.toUpperCase()) {
          // 验证码正确，可以进行登录操作
          console.log('登录成功')
          if (checked.value) {
            localStorage.setItem('username', username.value)
            localStorage.setItem('password', password.value)
          }
          router.push('/welcome')
          // 向 www.baidu.com 发送 POST 请求
          axios
            .post('https://localhost:7136/api/Login/Register/Register', { username:'123' ,password:'123'})
            .then(response => {
              console.log('请求成功')
              console.log(response.data)
            })
            .catch(error => {
              console.log('请求失败')
              console.error(error)
            })
        } else {
          // 验证码错误
          console.log('验证码错误')
          console.log(realCode.value)
        }
      }
  
      function handleCheckChange(e) {
        checked.value = e.target.checked
        if (checked.value) {
          localStorage.setItem('username', username.value)
          localStorage.setItem('password', password.value)
        } else {
          localStorage.removeItem('username')
          localStorage.removeItem('password')
        }
      }
  
      captcha.value = genCaptcha()
      if (localStorage.getItem('username')) {
        username.value = localStorage.getItem('username')
        password.value = localStorage.getItem('password')
        checked.value = true
      }
  
      return {
        username,
        password,
        code,
        captcha,
        checked,
        refreshCaptcha,
        login,
        handleCheckChange,
      }
    },
  }
  </script>